import { createApp, h } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import "./assets/index.css";
import mixin from "./mixin/index";
import dayjs from "dayjs";
import il8n from "./utils/index";
const app = createApp({
  render: () => h(App),
  mixins: [mixin],
  mounted() {
    console.log(
      dayjs(this.get_data()).format("YYYY-MM-DD HH:mm:ss"),
      "应用启动"
    );
  },
  created() {
    console.log(this.$options.custom); // => "goodbye!"
  },
});
app.mixin({
  custom: "hello!",
});
app.directive("pin", {
  mounted(el, binding) {
    el.style.position = "fixed";
    // binding.value 是我们传递给指令的值——在这里是 200
    el.style.top = binding.value + "px";
  },
});
app.component("modal", {
  template: `
    <button @click="modalOpen = true">
        Open full screen modal!
    </button>
    <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        I'm a teleported modal! 
        (My parent is "body")
        <button @click="modalOpen = false">
          Close
        </button>
      </div>
    </div>
  </teleport>
  `,
  data() {
    return {
      modalOpen: false,
    };
  },
});
app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
  console.log(fromVal, toVal, "全局合并"); // toVal 父组件的值 formval 子组件的值
  // => "goodbye!", undefined
  // => "hello", "goodbye!"
  return toVal || fromVal; // 自定义选项在合并时，默认策略为简单地覆盖已有值
};
app.directive("focus", {
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el) {
    // 聚焦元素
    el.focus();
  },
});
const i18nStrings = {
  greetings: {
    hi: "Hallo!",
  },
};
app.use(il8n, i18nStrings);
app.use(store);
app.use(router);
app.use(antd);
app.mount("#app");
